<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="/static/index/js/vue.js"></script>
    <script src="/static/index/js/moment.min.js"></script>
    <script src="/static/antd/dist/antd.js"></script>
    <link rel="stylesheet" href="/static/antd/dist/antd.css">
    <script src="/static/antd/dist/jquery.js"></script>
    <link rel="stylesheet" href="/static/antd/dist/myLogos.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/style.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/bootstrap.css">
</head>
<body>
<div id="app" style="min-width: 1347px;">
    <!-- 顶部 -->
    <div style="position: fixed; width: 100%; z-index: 999;top: 0;">
        <a-collapse>
            <a-collapse-panel style="font-size: 2rem; text-align: center" key="1"
                              th:header="${session.loginUser==null?'请登录':session.loginUser.nickname}">
                <a style="padding-left: 25px; color: cadetblue;" href="http://auth.shushan.com/login.html"
                   th:if="${session.loginUser==null}">登录</a>
                <div style="width: 50%; margin: 25px auto">
                    <a-button @click="index" type="primary" style="width: 100%;">
                        主页
                    </a-button>
                </div>
                <div style="width: 50%; margin: 0 auto">
                    <a-input-search
                            v-model="keywordInput"
                            placeholder="请输入关键字"
                            enter-button="搜索"
                            size="large"
                            @search="onSearch"></a-input-search>
                </div>
                <br/>
                {{keywordInput}}
            </a-collapse-panel>
        </a-collapse>
    </div>

    <!-- 中间商品列表 -->
    <div style="margin-top: 100px;">
        <a-card hoverable>
            <a-card hoverable>
                <a-affix :offset-top="top">
                    <div class="One_ShopTop" style="align-items: center; display: flex;justify-content: center;">
                        <a-tag color="green"
                               style="font-size: 1.5rem; width: 25%; height: 40px; text-align: center; line-height: 40px;">
                            商品
                        </a-tag>
                        <a-tag color="green"
                               style="font-size: 1.5rem; width: 15%; height: 40px; text-align: center; line-height: 40px;">
                            单价
                        </a-tag>
                        <a-tag color="green"
                               style="font-size: 1.5rem; width: 15%; height: 40px; text-align: center; line-height: 40px;">
                            数量
                        </a-tag>
                        <a-tag color="green"
                               style="font-size: 1.5rem; width: 15%; height: 40px; text-align: center; line-height: 40px;">
                            小计
                        </a-tag>
                        <a-tag color="green"
                               style="font-size: 1.5rem; width: 15%; height: 40px; text-align: center; line-height: 40px;">
                            操作
                        </a-tag>
                    </div>
                </a-affix>

            </a-card>

            <a-card hoverable>
                <div class="One_ShopCon">
                    <div th:if="${cart.items == null}" style="text-align: center">
                        <div style="font-size: 3rem;display: inline-block">暂无商品</div>
                        <a href="http://shushan.com">转到首页</a>
                    </div>
                    <ul th:if="${cart.items != null}" style="list-style: none">
                        <!--<li th:each="cartInfo:${cartList}">
                            <div> </div>

                            <div>
                                <ol>
                                    <li><input type="checkbox" class="check" th:value="${cartInfo.skuId}" onchange="checkSku(this)" th:checked="(${cartInfo.isChecked}==1)?'true':'false'" /></li>
                                    <li>
                                        <dt><img th:src="${cartInfo.imgUrl}" src="/static/cart/img/shop1.jpg" alt=""></dt>
                                        <dd th:onclick="'toItem('+${cartInfo.skuId}+')'">
                                            <p>
                                                <span th:text="${cartInfo.skuName}">TCL 55A950C 55英寸32核</span>
                                            </p>
                                        </dd>
                                    </li>
                                    <li>
                                        <p class="dj" th:text="'￥'+${cartInfo.skuPrice}">4599.00</p>
                                    </li>
                                    <li>
                                        <p>
                                            <span>-</span>
                                            <span th:text="${cartInfo.skuNum}">5</span>
                                            <span>+</span>
                                        </p>
                                    </li>
                                    <li style="font-weight:bold">
                                        <p class="zj" th:text="'￥'+${cartInfo.totalPrice}">￥22995.00</p>
                                    </li>
                                    <li>
                                        <p>删除</p>
                                    </li>
                                </ol>
                            </div>
                        </li>-->
                        <li th:each="item : ${cart.items}">
                            <div>
                            </div>
                            <div>
                                <a-card hoverable style="width: 100%;">
                                    <label>
                                        <a-card hoverable
                                                style="display: inline-table; height: 260px; line-height: 211px; text-align: center;">
                                            <input type="checkbox" th:attr="skuId=${item.skuId}" class="itemCheck"
                                                   th:checked="${item.check}">
                                        </a-card>
                                    </label>
                                    <a-card hoverable style="display: inline-table;height:261px;">
                                        <dt><img style="width: 60px; height: 60px;" th:src="${item.image}" alt=""></dt>
                                        <dd style="width: 300px">
                                            <p>
                                                <a th:href="'http://item.shushan.com/'+${item.skuId}+'.html'">
                                                    <span th:text="${item.title}">TCL 55A950C 55英寸32核</span>
                                                </a>
                                                <br/>
                                                <span th:each="attr : ${item.skuAttr}" th:text="${attr}+'&nbsp;&nbsp;'">尺码: 55时 超薄曲面 人工智能</span>
                                            </p>
                                            <!--                                    <p>人工智能 HDR曲面超薄4K电视金属机</p>-->
                                        </dd>
                                    </a-card>
                                    <a-card hoverable
                                            style="display: inline-table; width: 16%; text-align: center; height: 260px;">
                                        <p style="line-height: 200px;" class="dj"
                                           th:text="'￥'+${#numbers.formatDecimal(item.price, 0,2)}">
                                            ￥4599.00</p>

                                    </a-card>
                                    <a-card hoverable
                                            style="display: inline-table; width: 16%; text-align: center; height: 260px;">
                                        <p style="line-height: 200px;"  th:attr="skuId=${item.skuId}">
                                            <a-input allowClear pressEnter="memoStyleChange($event)" th:id="${item.skuId}" type="number"  :min="1" :max="100000" th:value="${item.count}" @change="memoStyleChange($event)" ></a-input>
                                        </p>
                                    </a-card>
                                    <a-card hoverable
                                            style="display: inline-table; width: 16%; text-align: center; height: 260px; font-weight:bold;">
                                        <p style="line-height: 200px;" class="zj">
                                            ￥[[${#numbers.formatDecimal(item.totalPrice, 1,2)}]]
                                        </p>
                                    </a-card>

                                    <a-popconfirm
                                            title="确认删除？"
                                            ok-text="确认"
                                            cancel-text="取消"
                                            @confirm="confirm"
                                            @cancel="cancel"
                                    >
                                        <a-card hoverable th:id="${item.skuId}" @click="confirmId($event)"
                                                style="display: inline-table; width: 16%; text-align: center; height: 260px;">

                                            <p style="line-height: 200px; color: red;" class="deleteItemBtn"
                                               th:attr="skuId=${item.skuId}">删除</p>
                                        </a-card>
                                    </a-popconfirm>
                                </a-card>
                            </div>
                        </li>

                    </ul>
                </div>
            </a-card>



                <a-card hoverable >
                    <a-affix :offset-bottom="bottom">
                        <div>
                            <a-card hoverable style="display: inline-table; width: 60%; text-align: center; ">
                                总价:
                                <span style="color:#e64346;font-weight:bold;font-size:16px;" class="fnt"
                                      th:text="'￥ '+${#numbers.formatDecimal(cart.totalAmount, 1,2)}"
                                >
                                </span>
                            </a-card>
                            <!--<a-card hoverable style="display: inline-table; width: 37%; text-align: center; ">
                                优惠:
                                <span
                                        style="color:#e64346;font-weight:bold;font-size:16px;"
                                        th:text="'- '+${#numbers.formatDecimal(cart.reduce, 1,2)}"
                                >
                                </span>
                            </a-card>-->
                            <a-card  th:if="${cart.items == null}" hoverable style="display: inline-table; width: 38%; height: 73px; text-align: center; background-color: #e64346; color: white;font-size: 1.7rem; " >
                                <span >无商品</span>
                            </a-card>
                            <a-card th:if="${cart.items != null}"  hoverable style="display: inline-table; width: 38%; height: 73px; text-align: center; background-color: #e64346; color: white;font-size: 1.7rem; " @click="toTrade">
                                <span >去结算</span>
                            </a-card>
                        </div>
                    </a-affix>
                </a-card>
        </a-card>
    </div>

    <!-- 底部 -->
    <div class="mkl_footer"
         style="background-image: url('https://img.zcool.cn/community/01431c598be9d60000002129c119f6.jpg@1280w_1l_2o_100sh.jpg')">
        <div class="sub-footer" style="background: rgba(8 ,10 ,12, 0.8);">
            <div class="container">
                <div class="mkls_footer_grid">
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>地址:</h4>
                        <p>贵州省贵阳市清镇市,
                            <br> 云岭东路</p>
                    </div>
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>联系</h4>
                        <p>
                            <span>电话 : </span>182 xxxx 8687</p>
                        <p>
                            <span>邮箱 : </span>
                            <a href="#" style="color: #1890ff;">m182xxxx8687@163.com</a>
                        </p>
                    </div>
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>营业时间:</h4>
                        <p>全天候</p>
                        <p>每周五维护
                            <span>(数据服务)</span>
                        </p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div class="footer-copy-right">
            <div class="container">
                <div class="allah-copy">
                    <p>Copyright &copy; 2021.书山 <a href="http://shushan.com" target="_blank"></a></p>
                </div>
                <div class="footercopy-social">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="fa fa-facebook"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-rss"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-vk"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- 底部锚点 -->
    <div>
        <a-back-top></a-back-top>
    </div>
    <!-- 返回主页按钮 -->
    <div style="position:fixed; top: 5px; right: 5px;">
        <a-affix :offset-top="top">
            <a-button th:href="'http://item.shushan.com'" type="primary">
                返回主页
            </a-button>
        </a-affix>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                keywordInput: "",
                top: 50,
                bottom: 0,
                deleteId: 0
            }
        },
        methods: {
            onSearch() {
                // window.location.href="http://search.shushan.com/list.html?keyword="+keyword;
                location.href = "http://search.shushan.com/list.html?keyword=" + this.keywordInput
                // console.log('搜索值',value);
            },
            index() {
                location.href = "http://shushan.com"
            },
            confirm(e) {
                // console.log(e.currentTarget.id);
                console.log('删除',this.deleteId)
                this.$message.success('删除成功');
                location.href = "http://cart.shushan.com/deleteItem?skuId="+this.deleteId

            },
            confirmId(e){
                this.deleteId = e.currentTarget.id
            },
            cancel(e) {
                console.log(e);
                this.$message.error('取消删除');
            },
            toTrade() {
                console.log("TOTRADE")
                window.location.href = "http://order.shushan.com/toTrade";
            },
            memoStyleChange(e) {
                console.log(e.currentTarget.value)
                console.log(e.currentTarget.id)
                location.href = "http://cart.shushan.com/countItem?skuId="+e.currentTarget.id+"&num="+ e.currentTarget.value
            }
        },
    })

    // 处理购物车列表 的选中状态
    $(".itemCheck").click(function () {
        let skuId = $(this).attr("skuId");
        let check = $(this).prop("checked");
        console.log(skuId)
        console.log(check)
        location.href = "http://cart.shushan.com/checkItem?skuId="+skuId+"&check="+(check?1:0);
    })
</script>
</body>
</html>